<template>
	<view class="home-container pageBg">
		<!-- 顶部搜索栏 -->
		<searchBar @search="onSearch"/>
		
		<!-- 轮播图 -->
		<view class="content" v-if="searchKey === ''">
			<swiper class="banner" circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item class="banner-item" v-for="(item, index) in bannerList" :key="index">
					<image :src="item.image" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 快速操作区 -->
		<view class="quick-actions" v-if="searchKey === ''">
			<view class="action-item" @tap="navigateToAppointment">
				<view class="action-icon">
					<image class="action-icon-image" src="/static/quick-questions/appoint-active.png" mode="aspectFill"></image>
				</view>
				<text>预约接种</text>
			</view>
			<view class="action-item" @tap="navigateToMyAppointments">
				<view class="action-icon">
					<image class="action-icon-image" src="/static/quick-questions/appointment-active.png" mode="aspectFill"></image>
				</view>
				<text>我的预约</text>
			</view>
			<view class="action-item" @tap="navigateToProfile">
				<view class="action-icon">
					<image class="action-icon-image" src="/static/quick-questions/user-active.png" mode="aspectFill"></image>
				</view>
				<text>个人信息</text>
			</view>
		</view>
		
		<!-- 接种点列表 -->
		<view class="section-title">
			<text>附近接种点</text>
		</view>
		
		<view class="vaccination-sites">
			<view 
				class="site-item" 
				:class="{ 'site-full': site.status === '已约满' }"
				v-for="(site, index) in filteredSites" 
				:key="index" 
				@tap="viewSiteDetail(site)"
			>
				<view class="site-info">
					<text class="site-name">{{site.name}}</text>
					<text class="site-address">{{site.address}}</text>
					<view class="site-stats">
						<text class="vaccine-count">剩余疫苗: {{site.vaccineCount}}剂</text>
					</view>
				</view>
				<view class="site-status" :class="{'status-open': site.status === '可预约'}">
					<text>{{site.status}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { getVaccineInfoAPI } from '@/services/vaccine'
import { onLoad } from '@dcloudio/uni-app'
import searchBar from '@/components/search-bar/search-bar.vue'

// 轮播图
const bannerList = ref([
	{ image: '/static/swiper/banner1.jpg' },
	{ image: '/static/swiper/banner2.jpg' },
	{ image: '/static/swiper/banner3.jpg' }
])

// 接种点列表
const vaccinationSites = ref([])

// 获取接种点信息
const getVaccineInfo = async () => {
	const res = await getVaccineInfoAPI()
	vaccinationSites.value = res.data
}
onLoad(() => {
	getVaccineInfo()
})

// 搜索
const searchKey = ref('') // 搜索关键字
const onSearch = (value) => {
	searchKey.value = value
}

// 过滤接种点
const filteredSites = computed(() => {
	if (!searchKey.value) return vaccinationSites.value
	return vaccinationSites.value.filter(site => 
		site.name.includes(searchKey.value) || 
		site.address.includes(searchKey.value)
	)
})

// 跳转预约tab
const navigateToAppointment = () => {
	uni.switchTab({
		url: '/pages/appointment/appointment'
	})
}

// 跳转我的预约
const navigateToMyAppointments = () => {
	uni.switchTab({
		url: '/pages/my-appointments/my-appointments'
	})
}

// 跳转个人信息
const navigateToProfile = () => {
	uni.switchTab({
		url: '/pages/profile/profile'
	})
}

// 跳转接种点详情
const viewSiteDetail = (site) => {
	// 检查接种点状态
	if (site.status === '已约满') {
		uni.showToast({
			title: '该接种点已约满，请选择其他接种点',
			icon: 'none',
			duration: 2000
		})
		return
	}
	
	//  switchTab 不支持携带参数
	uni.setStorageSync('selectedSiteId', site.id)
	uni.switchTab({
		url: `/pages/appointment/appointment`,
	})
}
</script>

<style lang="scss">
.home-container {
	min-height: 100vh;
	background-color: $uni-bg-color-grey;
	
	.content{
    width: 100%;
    // background-color: $uni-bg-color;
    .banner {
      height: 350rpx;
      padding: 20rpx;
      .banner-item{
        padding: 0 20rpx;
        width: 100%;
        height: 100%;
        image {
          width: 100%;
          height: 100%;
          border-radius: 20rpx;
        }
      }
    }
	}
	
	.quick-actions {
		display: flex;
		justify-content: space-around;
		padding: 30rpx 20rpx;
		background-color: $uni-bg-color;
		
		.action-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.action-icon {
				width: 100rpx;
				height: 100rpx;
				background-color: #c1f3d4;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
        .action-icon-image{
          width: 50rpx;
          height: 50rpx;
        }
			}
			
			text {
				font-size: 24rpx;
				color: #333333;
			}
		}
	}
	
	.section-title {
		padding: 20rpx 35rpx;
		font-size: 36rpx;
		font-weight: bold;
    font-style: oblique;
		color: #333333;
		background-color: $uni-bg-color;
    margin-bottom: 20rpx;
    border-top: 2px solid $uni-bg-color-grey;
	}
	
	.vaccination-sites {
		padding: 0 30rpx;
		
		.site-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: $uni-bg-color;
			padding: 30rpx;
			margin-bottom: 30rpx;
			border-radius: 20rpx;
			box-shadow: 0 3rpx 10rpx rgba(0, 0, 0, 0.1);
			
			&.site-full {
				opacity: 0.7;
				cursor: not-allowed;
				
				.site-info {
					.site-name, .site-address, .site-stats {
						color: #999999;
					}
				}
			}
			
			.site-info {
				flex: 1;
				
				.site-name {
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
					margin-bottom: 10rpx;
					display: block;
				}
				
				.site-address {
					font-size: 26rpx;
					color: #666666;
					margin-bottom: 20rpx;
					display: block;
				}
				
				.site-stats {
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					color: #999999;
				}
			}
			
			.site-status {
				background-color: #FFEBEB;
				padding: 10rpx 30rpx;
				border-radius: 30rpx;
				
				text {
					color: #FF4D4F;
					font-size: 24rpx;
				}
				
				&.status-open {
					background-color: #E6F7FF;
					
					text {
						color: #007AFF;
					}
				}
			}
		}
	}
}
</style> 